<template>
  <div id="app">
    <!-- 登录 -->
    <el-container style="min-height: 100vh; padding: 0">
      <!-- 头部 -->
      <el-header style="height: 42px; padding: 0">
        <HomeTop :userName="userName"></HomeTop>
      </el-header>
      <el-container>
        <!-- 侧栏 -->
        <el-aside width="201px" v-if="isLogin">
          <HomeMenu></HomeMenu>
        </el-aside>
        <!-- 内容 -->
        <el-main class="page_box" style="padding: 20px 18px" v-if="isLogin">
          <router-view />
        </el-main>
        <el-main style="padding: 0" v-else>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import HomeTop from "@/components/homeTop.vue";
import HomeMenu from "@/components/homeMenu.vue";

export default {
  components: {
    HomeTop,
    HomeMenu,
  },
  data() {
    return {
      isLogin: false, // 是否登录
      userName: "",
    };
  },
  created: function () {
    this.isLogin = this.$store.state.loginToken != "" ? true : false;
    this.userName = this.$store.state.loginUserName;
  },
  methods: {},
  computed: {
    listenLogin() {
      return this.$store.state.loginToken;
    },
    listenLoginName() {
      return this.$store.state.loginUserName;
    },
  },
  watch: {
    listenLogin: function (ov) {
      if (ov == "") {
        this.$set(this, "isLogin", false);
      } else {
        this.$set(this, "isLogin", true);
      }
    },
    listenLoginName: function (ov) {
      this.$set(this, "userName", ov);
    },
  },
};
</script>
